<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .btn-xs {
        --bs-btn-padding-y: .15rem; 
        --bs-btn-padding-x: .3rem; 
        --bs-btn-font-size: .75rem
      }
    </style>
  </head>
  <body>
    
    <!-- 
      table-striped：斑马条纹
      table-hover：启用悬停状态
      table-sm：小表格
    -->
    <table class="table table-striped table-hover table-sm">
      <tr align="center" class="table-info">
        <th>序号</th>
        <th>编号</th>
        <th>名称</th>
        <th>单价</th>
        <th>库存</th>
        <th>小计</th>
        <th>操作</th>
      </tr>

      <tr align="center">
        <td>1</td>
        <td>101</td>
        <td>米家智能插座WIFI版</td>
        <td>39.5</td>
        <td>
          <button class="btn btn-primary  btn-xs">-</button>
          <input type="text" style="width: 50px;" value="31">
          <button class="btn btn-primary  btn-xs">+</button>
        </td>
        <td>1225.5</td>
        <td>
          <button type="button" class="btn btn-danger btn-xs">删除</button>
          <button type="button" class="btn btn-primary btn-xs">编辑</button>
        </td>
      </tr>

      <tr align="center">
        <td>1</td>
        <td>101</td>
        <td>米家智能插座WIFI版</td>
        <td>39.5</td>
        <td>
          <button class="btn btn-primary  btn-xs">-</button>
          <input type="text" style="width: 50px;" value="31">
          <button class="btn btn-primary  btn-xs">+</button>
        </td>
        <td>1225.5</td>
        <td>
          <button type="button" class="btn btn-danger btn-xs">删除</button>
          <button type="button" class="btn btn-primary btn-xs">编辑</button>
        </td>
      </tr>

      <tr align="center">
        <td>1</td>
        <td>101</td>
        <td>米家智能插座WIFI版</td>
        <td>39.5</td>
        <td>
          <button class="btn btn-primary  btn-xs">-</button>
          <input type="text" style="width: 50px;" value="31">
          <button class="btn btn-primary  btn-xs">+</button>
        </td>
        <td>1225.5</td>
        <td>
          <button type="button" class="btn btn-danger btn-xs">删除</button>
          <button type="button" class="btn btn-primary btn-xs">编辑</button>
        </td>
      </tr>

      <tr>
        <td colspan="7" align="right">总计：0 元</td>
      </tr>

    </table>





    <script src="bootstrap-5.3.3-dist/js/bootstrap.min.js" ></script>
  </body>
</html>